*{margin: 0;
  padding:0;
}

body{
	background-color:#282828;
}

.cube{
	position:relative;
	width: 200px;
	height: 200px;
	
	perspective: 800px;
	margin: 100px auto;
	
}
.cube .imgs{
	width:100%;
	height:100%;
	position:absolute;
	transform-style:preserve-3d;
	list-style: none;
    transition:all 0.4s;

}
.cube .imgs li{
	width:100%;
    height:100%;
    position:absolute;

}
.cube .imgs li img{
	width:100%;
    height:100%;
}

.cube .imgs .img1{
transform:rotateY(0deg) rotateX(0deg) translateZ(100px);

}

.cube .imgs .img2{
transform:rotateY(0deg) rotateX(180deg) translateZ(100px);

}
.cube .imgs .img3{
transform:rotateY(-90deg) rotateX(0deg) translateZ(100px);

}
.cube .imgs .img4{
transform:rotateY(90deg) rotateX(0deg) translateZ(100px);

}
.cube .imgs .img5{
transform:rotateY(0deg) rotateX(-90deg) translateZ(100px);

}
.cube .imgs .img6{
transform:rotateY(0deg) rotateX(90deg) translateZ(100px);

}
 .imgs{
	transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
}
.table{
	display:grid;/*显示类型为网格类*/
	grid-template-columns:105px 105px 105px;/*网格列数及宽度*/
	grid-template-rows:85px 85px;/*网格行数及高度*/
	justify-content: center;/*整体网格居中*/
    grid-gap:15px;/*网格间距*/
}
.table input{
	width:105px;
	height:85px;
	border:2px solid white;
	outline:none;
}
.table input:focus{/*点击元素时触发*/
	border:2px solid #e70;
}

.cube .input-img1{
	transform:rotateY(0deg) translateZ(0px);
}
.cube .input-img2{
	transform:rotateX(-180deg) translateZ(0px);
}

.cube .input-img3{
	transform:rotateY(90deg) translateZ(0px);
}
.cube .input-img4{
	transform:rotateY(-90deg) translateZ(0px);
}
.cube .input-img5{
	transform:rotateX(90deg) translateZ(0px);
}
.cube .input-img6{
	transform:rotateX(-90deg) translateZ(0px);
}